<template>
  <div>
    <div
      v-if="
        nowRouteName == 'page404' ||
        nowRouteName == 'movieitem' ||
        nowRouteName == 'Login' ||
        nowRouteName == 'citylist'
      "
    ></div>
    <footer v-else>
      <!-- 
    <nav>
      <router-link to="/">电影/影院</router-link> |
      <router-link to="/video">视频</router-link> |
      <router-link to="/shortvideo">小视频</router-link> |
      <router-link to="/show">演出</router-link> |
      <router-link to="/me">我的</router-link> |
    </nav> -->

      <ul>
        <li>
          <router-link to="/movie"
            ><span class="iconfont icon-dianying"></span
            ><span>电影/影院</span></router-link
          >
        </li>
        <li>
          <router-link to="/video"
            ><span class="iconfont icon-ziyuan"></span
            ><span>视频</span></router-link
          >
        </li>
        <li>
          <router-link to="/shortvideo"
            ><span class="iconfont icon-shipin"></span
            ><span>小视频</span></router-link
          >
        </li>
        <li>
          <router-link to="/show"
            ><span class="iconfont icon-menpiao"></span
            ><span>演出</span></router-link
          >
        </li>
        <li>
          <router-link to="/me"
            ><span class="iconfont icon-wode-weixuanzhong"></span
            ><span>我的</span></router-link
          >
        </li>
      </ul>
    </footer>
  </div>
</template>

<script>
export default {
  name: "MyFooter",
  data() {
    return {
      nowRouteName: "",
    };
  },
  mounted() {
    // console.log(this.$route);
    // this.nowRouteName = this.$route.name;
  },
  watch: {
    $route() {
      console.log(this.$route);
      this.nowRouteName = this.$route.name;
      console.log(this.nowRouteName);
    },
  },
};
</script>

<style lang="less" scoped>
footer {
  position: fixed;
  bottom: 0;
  height: 1.3333rem;
  width: 100%;
  background: #fff;
  line-height: 1.3333rem;
  border-top: 1px solid #ccc;
  ul {
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 1.3333rem;
    li:nth-child(1) {
      span:nth-child(1) {
        font-size: 25px;
      }
    }
    li:nth-child(4) {
      span:nth-child(1) {
        font-size: 22px;
      }
    }
    li:nth-child(5) {
      span:nth-child(1) {
        font-size: 25px;
      }
    }
    li {
      width: 20%;
      height: 1.3333rem;
      display: flex;
      justify-content: center;
      align-items: center;
      a {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        line-height: 0.4rem;
        color: #666;
        &.router-link-active {
          color: #f03d37;
        }
        span:first-child {
          margin: auto;
          font-size: 20px;
          margin-bottom: 0.1333rem;
        }
      }
    }
  }
}
</style>